/** 需要将所有的dom元素对象以及相关资源全部加载完毕之后，再来实现的事件函数 */
window.onload = function () {
    var zoomImgIndex = 0
    /** 路径导航数据渲染 */
    function navPathDataBind() {
        /*
         * 1. 先获取页面导航的页面元素 navPath
         * 2. 再获取所需要的数据 data.js -> mobile.path
         * 3. 由于数据是需要动态产生的，那么相应的dom元素也应该是动态产生的。含义：需要创建dom元素。
         *      根据数据的数量，创建dom元素。
         * 4. 遍历数据，创建dom元素
         */

        // 1
        let navPath = document.querySelector('#wrapper main .content #navPath')
        // 2
        let paths = mobile.path
        // 3
        for (let i = 0; i < paths.length; i++) {
            // 4
            const path = paths[i];
            // 5. 创建a标签
            let aNode = document.createElement('a')
            aNode.innerText = path.title

            if (i < paths.length - 1) {
                aNode.href = path.url
                // 创建i标签
                let iNode = document.createElement('i')
                iNode.innerText = '/'
                // 6. 让navPath元素追加a标签和i标签
                navPath.appendChild(aNode)
                navPath.appendChild(iNode)
                continue
            }
            navPath.appendChild(aNode)
        }
    }
    navPathDataBind()
    /** 放大镜移入移出 */
    function magnifier() {
        /*
         * 思路：
         * 1. 获取原图元素对象，并且设置移入事件（onmouseover/onmouseenter）
         * 2. 动态创建蒙版元素以及大图框和大图片元素。
         * 3. 移出时，需要移除蒙版元素和大图框、大图片
         */
        let src = document.querySelector('#wrapper main .content #center #left #leftTop #src')
        let leftTop = document.querySelector('#wrapper main .content #center #left #leftTop')

        // 创建蒙版元素
        let maskDiv = document.createElement('div')
        maskDiv.id = 'mask'
        // 创建大图框
        let zoom = document.createElement('div')
        zoom.id = 'zoom'
        // 创建大图片
        let zoomImg = document.createElement('img')
        zoomImg.src = mobile.imagesSrc[zoomImgIndex].b


        // 设置移入事件
        src.onmouseenter = function () {
            // 原图追加蒙版
            src.appendChild(maskDiv)
            // 大图框追加大图片
            zoom.appendChild(zoomImg)
            leftTop.appendChild(zoom)
        }
        // 设置鼠标移动事件
        src.onmousemove = function (event) {
            /* 
             * event.clientX 鼠标点距离浏览器左侧x轴的值
             * src.getBoundingClientRect().left 原图距离浏览器左侧可视left值
             * offsetWidth 元素的占位宽度
             */
            let left = event.clientX - src.getBoundingClientRect().left - maskDiv.offsetWidth / 2
            let top = event.clientY - src.getBoundingClientRect().top - maskDiv.offsetHeight / 2
            // 边界判断
            if (left < 0) left = 0
            if (top < 0) top = 0
            if (left > src.clientWidth - maskDiv.offsetWidth) left = src.clientWidth - maskDiv.offsetWidth
            if (top > src.clientHeight - maskDiv.offsetHeight) top = src.clientHeight - maskDiv.offsetHeight


            // 设置left top属性
            maskDiv.style.left = left + 'px'
            maskDiv.style.top = top + 'px'
            /*
             * 移动的比例关系 = 蒙版元素移动的距离 / 大图元素移动的距离
             * 蒙版元素移动的距离 = 原图框宽度 = 蒙版元素宽度
             * 大图片元素移动的距离 = 大图宽度 - 大图框元素的宽度
             */
            var scale = (src.clientWidth - maskDiv.offsetWidth) / (zoomImg.offsetWidth - zoom.clientWidth)
            zoomImg.style.left = -left / scale + 'px'
            zoomImg.style.top = -top / scale + 'px'

        }
        // 设置移出事件
        src.onmouseleave = function () {
            src.removeChild(maskDiv)
            zoom.removeChild(zoomImg)
            leftTop.removeChild(zoom)
        }
    }
    magnifier()
    /** 动态渲染放大镜缩略图的数据 */
    function thumbnailData() {
        /*
         * 1. 先获取picList中元素下的ul
         * 2. 再获取data.js文件下的imageSrc
         * 3. 遍历数组，根据数组长度来创建li元素
         */
        let ul = document.querySelector('#wrapper main .content #center #left #leftBottom #picList ul')
        let images = mobile.imagesSrc
        if (images && images.length > 0) {
            for (let i = 0; i < images.length; i++) {
                const image = images[i];
                let li = document.createElement('li')
                let img = document.createElement('img')
                img.src = image.s
                li.appendChild(img)
                ul.appendChild(li)
            }
        }

    }
    thumbnailData()
    /** 点击缩略图的效果 */
    function thumbnailClick() {
        let liNodes = document.querySelectorAll('#wrapper main .content #center #left #leftBottom #picList ul li')
        let srcImg = document.querySelector('#wrapper main .content #center #left #leftTop #src img')
        let images = mobile.imagesSrc
        srcImg.src = images[0].s
        // 循环点击这些li元素 
        for (let i = 0; i < images.length; i++) {
            const image = images[i];
            // 点击事件之前，给每一个元素都添加上自定义下标
            liNodes[i].index = i
            liNodes[i].onclick = function () {
                // 事件函数中的this永远指向的是实际发生事件的目标源对象
                let index = this.index
                zoomImgIndex = index
                magnifier()
                // 变换小图路径
                srcImg.src = image.s
            }

        }

    }
    thumbnailClick()
    /** 缩略图左右箭头点击 */
    function thumbnailArrowClick() {
        /*
         * 1. 获取左右两端的剪头按钮
         * 2. 再获取可视的div以及ul元素和所有的li元素
         * 3. 然后再发生点击事件
         */
        let prev = document.querySelector('#wrapper main .content #center #left #leftBottom a.prev')
        let next = document.querySelector('#wrapper main .content #center #left #leftBottom a.next')
        let ul = document.querySelector('#wrapper main .content #center #left #leftBottom #picList ul')
        let liNodes = document.querySelectorAll('#wrapper main .content #center #left #leftBottom #picList ul li')

        // 发生起点
        let start = 0
        // 步长
        let step = (liNodes[0].offsetWidth + 20) * 2
        // 总体的距离值 = ul宽度 - div宽度 = (图片的总数 - div中显示的数量) * (li的宽度 + 20)
        var endPosition = (liNodes.length - 5) * (liNodes[0].offsetWidth + 20)

        prev.onclick = function () {
            start -= step
            if (start < 0) start = 0
            ul.style.left = -start + 'px'
        }

        next.onclick = function () {
            start += step
            if (start > endPosition) start = endPosition
            ul.style.left = -start + 'px'
        }
    }
    thumbnailArrowClick()
    /** 商品详情数据的动态渲染 */
    function detail() {
        /*
         * 1. 查找rightTop元素及相应的数据
         * 2. 建立字符串变量将原来的布局结构贴进来，将所对应的数据放在对应的位置上，重新渲染rightTop元素
         */
        const detail = mobile.detail
        let rightTop = document.querySelector('#wrapper main .content #center #right .rightTop')
        let html = `
            <h3>${detail.title}</h3>
            <p>${detail.recommend}/p>
            <div class="priceWrap">
                <div class="priceTop">
                    <span>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</span>
                    <div class="price">
                        <span>￥</span>
                        <p>${detail.price}</p>
                        <i>降价通知</i>
                    </div>
                    <p>
                        <span>累计评价</span>
                        <span>${detail.evaluateNum}</span>
                    </p>
                </div>
                <div class="priceBottom">
                    <span>促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</span>
                    <p>
                        <span>${detail.promoteSales.type}</span>
                        <span>${detail.promoteSales.content}</span>
                    </p>
                </div>
            </div>
            <div class="support">
                <span>支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持</span>
                <p>${detail.support}</p>
            </div>
            <div class="address">
                <span>配送至</span>
                <p>${detail.address}</p>
            </div>`
        // 重新渲染元素
        rightTop.innerHTML = html
    }
    detail()
    /** 商品参数数据动态渲染 */
    function type() {
        const crumbData = mobile.detail.crumbData
        if (crumbData) {
            crumbData.forEach(crumb => {
                let typeDiv = document.querySelector('#wrapper main .content #center #right .rightBottom .type')
                let dl = document.createElement('dl')
                let dt = document.createElement('dt')
                dt.innerText = crumb.title
                dl.appendChild(dt)


                let dataArr = crumb.data
                if (dataArr) {
                    dataArr.forEach(data => {
                        let dd = document.createElement('dd')
                        dd.innerText = data.type
                        dd.setAttribute('price', data.changePrice)
                        dl.appendChild(dd)
                    })
                }
                typeDiv.appendChild(dl)
            });
        }
    }
    type()
    /** 价格变动 */
    function changePrice(arr) {
        /*
         * 1. 获取价格的标签元素
         * 2. 给每一个dd标签身上默认都设置一个自定义的属性，用来记录变化的价格
         * 3. 遍历arr数组，将dd元素身上的新变化的价格和已有价格相加
         * 4. 最后将计算之后的结果，重新渲染到p标签当中
         */
        let oldPrice = document.querySelector('#wrapper main .content #center #right .rightTop .priceWrap .priceTop .price > p')
        let defaultPrice = mobile.detail.price
        for (let i = 0; i < arr.length; i++) {
            const dd = arr[i];
            if (dd) {
                defaultPrice = Number(dd.getAttribute('price')) + Number(defaultPrice)

            }
        }
        oldPrice.innerText = defaultPrice
    }

    /** 点击商品参数之后，颜色的排他效果 */
    function chooseType() {
        /* 
         * 1. 获取所有的dl元素，取其中第一个dl元素下的所有dd先做测试
         * 2. 循环所有的dd元素，并且添加点击事件
         * 3. 确定实际发生事件的目标源对象，然后给其他所有的元素颜色都重置未基础颜色
         */
        let dlNodes = document.querySelectorAll('#wrapper main .content #center #right .rightBottom .type dl')
        let arr = new Array(dlNodes.length)

        if (dlNodes) {
            for (let i = 0; i < dlNodes.length; i++) {
                const dl = dlNodes[i];
                let ddNodes = dl.querySelectorAll('dd')
                if (ddNodes) {
                    ddNodes.forEach(dd => {
                        dd.onclick = function () {
                            // console.log(dd)
                            // console.log(this)
                            for (let i = 0; i < ddNodes.length; i++) {
                                ddNodes[i].style.color = '#666'
                            }
                            this.style.color = 'red'

                            let choice = document.querySelector('#wrapper main .content #center #right .rightBottom .choice')
                            choice.innerHTML = ''
                            arr[i] = this
                            changePrice(arr)
                            // 遍历arr数组，将非空元素的数组显示到页面上
                            arr.forEach((mark, index) => {
                                if (mark) {
                                    let markDiv = document.createElement('div')
                                    markDiv.className = 'mark'
                                    markDiv.innerText = mark.innerText
                                    let aNode = document.createElement('a')
                                    aNode.innerText = 'X'
                                    aNode.setAttribute('index', index)

                                    markDiv.appendChild(aNode)
                                    choice.appendChild(markDiv)

                                }
                            });


                            let aNodes = document.querySelectorAll('#wrapper main .content #center #right .rightBottom .choice .mark a')
                            aNodes.forEach(aNode => {
                                aNode.onclick = function () {
                                    let idx = this.getAttribute('index')
                                    arr[idx] = null
                                    let dds = dlNodes[idx].querySelectorAll('dd')
                                    dds.forEach(ddNode => {
                                        ddNode.style.color = '#666'
                                    });
                                    dds[0].style.color = 'red'
                                    choice.removeChild(this.parentNode)
                                    changePrice(arr)
                                }
                            });

                        }
                    });
                }

            }

        }

    }
    chooseType()

    /** 选择搭配中间区域复选框选中套餐价变动效果 */
    function combo() {
        /*
         * 1. 先获取中间区域所有的复选框元素
         * 2. 遍历这些元素 取出他们的价格 和左侧的基础价格进行累加
         */
        let inputList = document.querySelectorAll('#wrapper section .rightDetail .combo .listWrap .middle li input')
        if (inputList) {
            let defaultPrice = document.querySelector('#wrapper section .rightDetail .combo .listWrap .left p')

            inputList.forEach(input => {
                input.onclick = function () {
                    let price = Number(defaultPrice.innerText.slice(1))                    
                    for (let i = 0; i < inputList.length; i++) {
                        const checked = inputList[i];
                        if (checked.checked) {
                            // 将左侧的价格 加上选中的附加价格
                            price += Number(checked.getAttribute('value'))
                        }
                    }

                    let newPrice = document.querySelector('#wrapper section .rightDetail .combo .listWrap .right i')
                    newPrice.innerText = '￥' + price
                }
            });
        }
    }
    combo()

    /**
     * 公共的选项卡函数
     * 
     * @param btns 被点击的元素
     * @param contents 被切换显示的元素
     */
    // function tab(btns, contents) {
    //     if(btns) {
    //         btns.forEach((btn, index) => {
    //             btn[index].index = index
    //             btn.onclick = function() {
    //                 for (let i = 0; i < btns.length; i++) {
    //                     btns[i].className = ''
    //                     contents[i].className = ''
                        
    //                 }
    //                 this.className = 'active'
    //                 contents[this.index].className = 'active'
    //             }
    //         });
    //     }
    // }

    /** 点击左侧选项卡 */
    // function leftTab() {
    //     let h4s = document.querySelectorAll('#wrapper section aside .sideTop h4')
    //     let sideContent = document.querySelectorAll('#wrapper section aside .sideContent div')
    //     tab(h4s, sideContent)
    // }
    // leftTab()
    /** 点击右侧选项卡 */
    // function rightTab() {
    //     let lis = document.querySelectorAll('#wrapper section .rightDetail .details .tab li')
    //     let divs = document.querySelectorAll('#wrapper section .rightDetail .details .tabContent div')
    //     tab(lis, divs)
    // }
    // rightTab()
}